<template>
  <div class="layouts">
    <div class="layouts-left">
      <left />
    </div>
    <div class="layouts-right">
      <top />

      <div class="llt-layouts-body ">
        <router-view v-slot="{ Component }">
          <template v-if="Component">
            <transition name="list" >
              <keep-alive >
                <component :is="Component"></component>
              </keep-alive>
            </transition>
          </template>
        </router-view>
      </div>
    </div>
  </div>
</template>

<script setup >
import {
  ref,
  reactive,
  onMounted,
} from "vue";
import { useRouter, useRoute } from "vue-router";
import left from '@/layouts/left.vue';
import top from '@/layouts/top.vue';
import {
    useFullLoading
} from '@/plugins/fullLoading';
const router = useRouter();
const route = useRoute();

const { openLoading, closeLoading } = useFullLoading();
onMounted(() => {
  closeLoading();
});


/*
基本数据类型
引用数据类型（复杂类型） 个人建议 ref初始化变量 
ref 和 reactive 本质我们可以简单的理解为ref是对reactive的二次包装, 
ref定义的数据访问的时候要多一个.value
*/

var isCollapse = ref(false);
const state = reactive({
  data: { a: 1 },
});

</script>

<style scoped lang="scss">
.layouts{
  display: grid;
  height: 100%;
 grid-template-columns: 200px 1fr;
 .layouts-left{
  background-color: #fff;
  border-right: 1px solid #d6d6d6;
  display: grid;
 }
 .layouts-right{
    display: grid;
    grid-template-rows:60px 1fr;  
    background-color: #fff;
 }
}
</style>
